<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeDetail">佣金概况</el-breadcrumb-item>
            <el-breadcrumb-item :key="2">资金概况</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        时间：{{filters.date[0] | toDate}}
        <template v-if="info.isDuration">
          - {{filters.date[1] | toDate}}
        </template>
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="closeDetail"> 返回
        </el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <custom-container class="sub-member">
        <custom-container-body>
          <el-table :data="cTableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
          >
            <el-table-column
              align="center"
              width="170px"
              label="日期">
              <template slot-scope="{row}">
                {{row.date}}
              </template>
            </el-table-column>

            <el-table-column
              prop="rechargeAmount"
              align="center"
              label="存款金额">
              <template slot-scope="{row}">
                {{row.rechargeSumMoney | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="withdrawAmount"
              align="center"
              label="提款金额">
              <template slot-scope="{row}">
                {{row.withdrawSumMoney | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="bettingAmount"
              sortable="custom"
              align="center"
              label="投注总额"
            >
              <template slot-scope="{row}">
                {{row.bettingSumMoney | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="recharegUniqueUser"
              align="center"
              label="存款人数"
            >
            </el-table-column>

            <el-table-column
              prop="withdrawUniqueUser"
              align="center"
              label="提款人数"
            >
            </el-table-column>

            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>
          <div class="el-pagination-container">
            <el-pagination
              bordered
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
              :current-page="filters.page" :page-size="filters.size"
              :total="tableData.total">
            </el-pagination>
          </div>
        </custom-container-body>
      </custom-container>
    </static-container-body>
  </static-container>
</template>

<script type="text/jsx">

  import {fundByTimeApi as getApi} from '@/services/api/home';

  import {grid} from '@/build';

  export default {
    name: 'capital-detail',

    mixins: [grid],

    inject: ['closeDetail'],

    props: {
      info: Object
    },

    data() {
      let date = [];
      if (this.info.type === 2) {
        date = _.toTimestamp(
            {start: [0, 'month'], end: [0, 'day'], startEnd: true}
          );
      } else {
        date = _.toTimestamp(
            {start: [0, 'day'], end: [0, 'day'], startEnd: true}
          );
      }

      return {
        filters: {
          date,
          page: 1,
          size: 10
        },
        currentRow: undefined,
        tableData: {
          list: [],
          total: 0
        },
        statistic: [
          {
            index: 2,
            prop: 'tableData.sum.rechargeAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            },
          },
          {
            index: 3,
            prop: 'tableData.sum.withdrawAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 4,
            prop: 'tableData.sum.betEffectAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 5,
            prop: 'tableData.sum.bettingAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 6,
            prop: 'tableData.sum.bettingWin',
            format: (value) => {
              return <money-text negate={true} value={value}></money-text>;
            }
          },
        ],
      }
    },
    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          const cData = {};
          cData.list = _(data).map((info, date) => {
            return {
              date,
              ...info
            };
          }).orderBy(['date'], ['desc']).value();
          cData.total = _.size(cData.list);
          return cData;
        }
      });

      this.getAll();

      this.$store.dispatch(types.GET_CREDIT_STATUS);
    }
  }
</script>
